<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('产品项目组列表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">

<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 项目列表
            </div>
            <div class="box-tools pull-right">

                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div class="row col-xs-12" >
                <select id="projectSelect"  onchange="changeProject(this)">
                </select>
            </div>
            <div class="row col-xs-12">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>

<div class="ui-layout-center">

    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden"  id="projectCode" name="projectCode"  />
                    <input type="hidden"  id="groupId" name="groupId"  />
                    <input type="hidden" name="cycleId"   th:value="${cycleId}" id="cycleId"/>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <div class="btn-group">
                    <select class="form-control" data-style="btn-success"  id="cycleIdSelect"  th:onchange="changeCycleType()">
                        <optgroup th:label="#{okr.yearChoice}">
                            <div th:each="cycle : ${cycleList}">
                                <div th:if="${cycle.cycleType == 1}">
                                <span th:if="${cycle.status == 0}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                                    <span th:if="${cycle.status == 1}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                                </div>
                            </div>
                        </optgroup>
                        <optgroup th:label="#{okr.quarterChoice}">
                            <div th:each="cycle : ${cycleList}">
                                <div th:if="${cycle.cycleType == 0}">
                                <span th:if="${cycle.status == 0}">
                                        <option th:value="${cycle.id}" selected="selected" th:text="${cycle.cycleName}"></option>
                                </span>
                                    <span th:if="${cycle.status == 1}">
                                        <option th:value="${cycle.id}" th:text="${cycle.cycleName}"></option>
                                </span>
                                </div>
                            </div>
                        </optgroup>
                    </select>
                </div>

            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">

    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185 });
        queryProjectList();
    });



    var addFlag = [[${@permission.hasPermi('system:group:add')}]];
    var editFlag = [[${@permission.hasPermi('system:group:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:group:remove')}]];
    var projectListFlag = [[${@permission.hasPermi('system:project:projectList')}]];
    var prefix = ctx + "system/group";


    /**
     * 查询项目列表清单
     */
    function queryProjectList()
    {
        var url = ctx + "system/project/projectList";
        $.ajax({
            url: url,
            data: {},
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (result) {
                var len = result.length;
                if(len>0)
                {
                    var html = "";
                    for(var i=0;i<len;i++){
                        html+="<option value="+result[i].code+">"+result[i].name+"</option>";
                    }
                    $("#projectSelect").html(html);
                    //初始化查询项目组织结构
                    queryGroupTree(result[0].code);
                    //初始化查询项目组织人员列表
                    $("#projectCode").val(result[0].code);
                    $.table.search();
                }
            }
        });
    }


    function queryGroupTree(projectCode)
    {
        console.log(projectCode);
        var url = ctx + "system/group/treeData/"+ projectCode;
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#groupId").val(treeNode.id);
            $("#projectCode").val($("#projectCode").val());
            $.table.search();
        }
    }

    $('#btnExpand').click(function() {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function() {
        queryGroupTree();
    });


    $(function() {
        var prefix = ctx + "system/projectUser";
        var options = {
            url: prefix+"/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            modalName: "用户",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            clickToSelect: true,
            rememberSelected: true,
            columns: [
                {
                    field: 'id',
                    title: '分组ID',
                    visible: false
                },
                {
                    field: 'groupId',
                    title: '组ID',
                    visible: false
                },
                {
                    field: 'userid',
                    title: '用户id',
                    visible: false
                },
                {
                    field: 'groupName',
                    title: '组名称'
                },
                {
                    field: 'parentId',
                    title: '父ID',
                    visible: false
                },
                {
                    field: 'projectCode',
                    title: '项目编码'
                },
                {
                    field: 'userName',
                    title: '用户姓名'
                },
                {
                    field: 'deptName',
                    title: '部门'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="openOkrView('+row.userid+')"><i class="fa fa-street-view"></i>查看OKR</a> ');
                        actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="openOkrTreeMap('+row.userid+')"><i class="fa fa-tree"></i>查看视图</a> ');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });


    /** 查询个人OKR清单，进行数据展现 **/

    function openOkrView(userId)
    {
        var url =  "../okr/info/selectUserOkrList/"+ userId+"/"+$("#cycleId").val();
        window.open(url);
    }
    /** 查询个人OKR视图，进行数据展现 **/
    function openOkrTreeMap(userId)
    {
        var url =  ctx + "okr/treeMap/selectUserOkrTreeMap/"+ userId+"/"+$("#cycleId").val();
        window.open(url);
    }
    //OKR 周期切换
    function changeCycleType(type) {
        var cycleId = $("#cycleIdSelect").val();
        $("#cycleId").val(cycleId);
    }
    /**
     * 切换项目进行列表数据变更
     * @param event
     */
    function changeProject(event)
    {
        //切换项目的同时 进行组织结构数据数据进行清空
        $("#groupId").val("");
        //重新查询项目组织结构树
        queryGroupTree($(event).val());
        //
        $("#projectCode").val($(event).val());
        //刷新列表数据
        $.table.search();
    }

    /* 分配用户-选择用户 */
    function selectUser() {
        var url =  ctx + "system/group/selectUser/"+ $("#groupId").val();
        $.modal.open("选择用户", url);
    }
</script>
</body>
</html>